<template>
  <div id="serviceuse-echarts" ref="radarecharts" style="width: 100%;height: 100%">
    <!-- 中心调用排行 -->
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from '../../mixins/resize'
// 引入提示框和标题组件
// 引入 雷达图
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
  components: {},
  mixins: [resize],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.echartsInit()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    echartsInit() {
      this.chart = echarts.init(this.$refs.radarecharts)
      var option = {
        backgroundColor: '#fff',
        color: ['#5EA6FE', '#FF5624', '#5EA6FE', '#36c57d', '#2e73ff'],
        grid: {
          left: 100,
          top: 0
        },
        legend: {
          data: [
            {
              name: '国家下发应用',
              icon: 'circle'
            },
            {
              name: '地方自研应用',
              icon: 'circle'
            }

          ],
          bottom: 26,
          right: 10,
          textStyle: {
            color: '#000',
            fontSize: 14
          },
          itemGap: 34,
          itemWidth: 10,
          itemHeight: 10
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,.5)',
          padding: [0, 0, 0, 0],
          textStyle: {
            color: '#fff'
          },
          axisPointer: {
            type: 'line',
            animation: true,
            lineStyle: {
              color: '#fff'
            }
          },
          extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)',
          formatter: (params, ticket, callback) => {
            let htmls = ''
            let xaxisName = ''
            if (params.length > 0) {
              xaxisName = params[0].axisValue
              htmls += '<div style="font-size:16px;color:#fff;border-radius:4px;padding-left:5px;text-align: left;">' + xaxisName + '</div><div>'
              for (let j = 0; j < params.length; j++) {
                htmls += '<p style="font-size:14px;padding:0px 5px 0px 2px;color:#fff;text-align: left;">' + params[j].seriesName + ' : ' + params[j].data + '%</p>'
              }
              htmls += '</div>'
              return htmls
            }
          }
        },
        xAxis: {
          type: 'value',
          position: 'top', // X轴位置
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#000'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 13,
            color: '#000'
          }

        },
        yAxis: {
          type: 'category',
          name: '',

          nameRotate: 1,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#000'
            }
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            fontSize: 13,
            color: '#000'
          },
          data: ['绵阳市', '达州市', '广元市', '雅安市', '宜宾市', '乐山市', '南充市']
        },
        series: [

          {
            name: '国家下发应用',
            type: 'bar',
            stack: 'a',
            barWidth: '30%',

            data: ['9', '5', '5', '4', '3', '3', '2']
          },
          {
            name: '地方自研应用',
            type: 'bar',
            stack: 'a',
            barWidth: '30%',
            data: ['4', '2', '3', '2', '1', '5', '1']
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
